<template>
	<div class="container">
		<loading v-model="isShow" :text="loadText"></loading>
		<sticky :check-sticky-support="false" :offset="0">
			<x-header title="购物车" @on-click-back="backPage" class="vux-1px-b" :left-options="{preventGoBack:true}">
				<a @click="edit" slot="right" v-if="total > 0">{{ editType ? '完成':'编辑'}}</a>
			</x-header>
		</sticky>
		<!-- <div class="pagetitle">{{ pagetitle }}</div> -->
		<div class="biglist" v-for="(item,bigindex) in listdata" :key="bigindex">
			<p class="category vux-1px-b" v-if="total > 0">
				<span @click="eachAll(item.type,bigindex)"><icon :type="item.type == 1?'circle':'success'" v-model="item.type"></icon></span> {{item.category}}
			</p>
			<!-- <p class="tips">{{item.tips}}</p> -->
			<swipeout>
				<div v-for="(subitem,subindex) in item.list" :key="subindex">
					<swipeout-item :threshold=".9" underlay-color="#fff">
						<div slot="right-menu">
							<swipeout-button @click.native="cartDelete(subitem.id)" :width="60" background-color="#D23934">删除</swipeout-button>
						</div>
						<div slot="content" class="demo-content vux-1px-b sublist">
							<div class="checked">
								<span @click="eachSelect(subitem.id,subitem.type,bigindex,subindex)" v-model="subitem.type" :id="subitem.id">
                                    <icon :type="subitem.type == 1?'circle':'success'"></icon>
                                </span>
							</div>
							<div class="picture"> <img :src="subitem.image" alt=""> </div>
							<div class="details">
								<p class="name">{{subitem.name}}</p>
								<!-- <p class="describe">{{subitem.describe}}</p> -->
								<p class="info" v-if="subitem['规格名']">所选规格：{{ subitem.规格名 }}</p>
								<p class="price_all">
									<span class="price">￥{{datatext(subitem.price)}}</span>
									<span class="num" v-if="!editType" style="padding-right:30px">x{{subitem['数量']}}</span>
									<span class="num" v-else>
                                    <x-number width="40px" button-style="round" v-model="subitem['数量']" :min="1" @on-change="XNumbersb(subitem.id,subitem['数量'])"></x-number>
                                </span>
								</p>
							</div>
						</div>
					</swipeout-item>
				</div>
			</swipeout>
		</div>

		<tabbar>
			<tabbar-item>
				<span slot="label" style="text-align: left;" @click="checkAll(checkAllgood)">
                    <icon :type="checkAllgood?'success':'circle'"></icon> 全选
                </span>
			</tabbar-item>
			<tabbar-item show-dot badge="2" class="vux-1px-r">
				<span slot="label" class="allPrice">
                    <span style="color: #000; font-weight: 700;">总价：</span>￥{{datatext(allPrice)}}
				</span>
			</tabbar-item>
			<tabbar-item>
				<span slot="label" :class="payTotype?'payto':'noto'" v-if="editType" @click="cartDelete2()">
                删除      <span v-show="payTotype">({{goodnum}})</span>
				</span>
				<span slot="label" :class="payTotype?'payto':'noto'" v-else @click="payfor(1)">
                去结算 <span v-show="payTotype">({{goodnum}})</span>
				</span>
			</tabbar-item>
		</tabbar>
		<toast text="请选择要结算的商品" v-model="isToast" type="text" width="200px" is-show-mask></toast>
		<toast text="删除成功" is-show-mask type="success" v-model="successToast"></toast>
		<div style="text-align:center" v-if="total < 1">
			<p style="width:100px; height:auto;overflow:hidden; margin:10px auto;"><img src="../../../static/images/nothing.png" width="100" alt=""></p>
			<p style="font-weight:bold; color:#999; font-size:14px;">购物车暂没有商品~</p>
		</div>
	</div>
</template>

<script>
	import { getCartList, AsyncUpdateCart, changeNum, cartDelete } from '@/api/Goods'
	import {
		XHeader,
		Loading,
		Sticky,
		Swipeout,
		SwipeoutItem,
		SwipeoutButton,
		numberComma,
		Icon,
		Tabbar,
		TabbarItem,
		XButton,
		XNumber,
		Group,
		Toast,
		XSwitch
	} from 'vux'
	export default {
		name: 'Goods',
		components: {
			XHeader,
			Loading,
			Sticky,
			Swipeout,
			SwipeoutItem,
			SwipeoutButton,
			Icon,
			Tabbar,
			TabbarItem,
			XButton,
			XNumber,
			Group,
			Toast,
			XSwitch
		},
		data() {
			return {
				serverUrl: process.env.SERVER_URL,
				isShow: false,
				loadText: 'Loading',
				pagetitle: '',
				listdata: [{
					category: '全部商品',
					tips: '再购1件立享满1件9.0折',
					type: 1,
					eachArr: [],
					list: []
				}],
				myarr: [],
				allPrice: 0,
				payTotype: false,
				checkAllgood: false,
				goodnum: 0,
				total: 0,
				editType: false,
				isToast: false,
				showPositionValue: true,
				successToast: false
			}
		},
		mounted() {
			this.getCartList();
		},
		methods: {
			edit(e) {
				this.editType = this.editType ? false : true
			},
			XNumbersb(id, num) { //数量修改
				var params = {
					a: 'changeCart',
					cartId: id,
					num: num,
					type: 'increase'
				}
				changeNum(params).then(response => {
					console.log(response)
				});
			},
			backPage() {
				this.$router.go(-1)

			},
			payfor(id) {
				if(this.listdata[0].eachArr.length < 1) {
					this.isToast = true;
				} else {
					var ids = ''
					for (const i in this.myarr) {
						ids += this.myarr[i].id + ','
					}
					ids = ids.substr(0, ids.length-1)
					getCartList({a: 'cartBuy', cartIds: ids, total: this.allPrice }).then(response => {
						console.log(response);
						// var page = this.$route.name;
						this.$router.push({
							path: '/GoodsOrder/Goodsorder/1',
							query: {
								id: 1,
								order_id: response
							}
						})
					});
				}
			},
			eachSelect(id, type, bigindex, subindex) { //小类
				var el = this.listdata[bigindex];
				if(type == 1) {
					el.eachArr.push(id);
					this.allPrice = Number(this.allPrice) + Number(el.list[subindex].price) * el.list[subindex].数量;
					this.goodnum++
						el.list[subindex].type = 2;
					if(el.eachArr.length == el.list.length) {
						// this.goodnum = el.eachArr.length
						el.type = 2;
					}
					this.myarr.push({
						id: id,
						goods_num: el.list[subindex].数量,
						selected: 1
					});
				} else {
					el.list[subindex].type = 1;
					el.type = 1;
					var index = el.eachArr.indexOf(id);
					el.eachArr.splice(index, 1);
					if(this.goodnum > 0) {
						this.allPrice = Number(this.allPrice) - Number(el.list[subindex].price) * el.list[subindex].数量;
						this.goodnum--;
					}
					for (const i in this.myarr) {
						if (this.myarr[i].id == id) {
							this.myarr[i].selected = '0'
						}	
					}
				}
				console.log(this.myarr);
				// 更新服务商购物车数据
				// AsyncUpdateCart(this.myarr).then(response => {});
			},
			eachAll(type, bigindex) {
				var el = this.listdata[bigindex];
				//              el.eachArr = [];
				if(type == 1) {
					for(var i = 0; i < el.list.length; i++) {
						if(el.eachArr.indexOf(el.list[i].id) == -1) {
							el.eachArr.push(el.list[i].id);
							this.allPrice = Number(this.allPrice) + Number(el.list[i].price) * el.list[i].数量;
							el.list[i].type = 2
						}
					}
					this.goodnum = this.goodnum + el.list.length;
					el.type = 2;

				} else {
					for(var i = 0; i < el.list.length; i++) {
						el.list[i].type = 1
						this.allPrice = Number(this.allPrice) - Number(el.list[i].price) * el.list[i].数量;
					}
					el.eachArr = []
					el.type = 1;
					this.goodnum = this.goodnum - el.list.length;
				}

			},
			checkAll: function(e) {
				var data = this.listdata;

				if(this.total > 0) {
					if(!e) {
						console.log('执行全选');

						this.goodnum = this.total;
						for(var i = 0; i < data.length; i++) {
							data[i].type = 2;
							for(var t = 0; t < data[i].list.length; t++) {
								if(data[i].eachArr.indexOf(data[i].list[t].id) == -1) {
									this.allPrice = Number(this.allPrice) + Number(data[i].list[t].price) * data[i].list[t].数量;
									data[i].eachArr.push(data[i].list[t].id);
									data[i].list[t].type = 2;
								}
							}
						}
						this.checkAllgood = true;
					} else {
						console.log('执行反选');
						this.allPrice = 0;
						this.goodnum = 0;
						for(var i = 0; i < data.length; i++) {
							data[i].type = 1;
							for(var t = 0; t < data[i].list.length; t++) {
								data[i].eachArr = []
								data[i].list[t].type = 1;
							}
						}
						this.checkAllgood = false;
					}
				}
			},
			datatext(n) {
				return numberComma(n);
			},
			// 获取购物车列表
			getCartList() {
				this.isShow = true
				getCartList({a: 'cartList'}).then(response => {
					var that = this;
					var totals = response.length;
					this.total = totals;
					this.listdata[0].list = response;
					for(var i = 0; i < totals; i++) {
						var id = that.listdata[0].list[i].id;
						var type = that.listdata[0].list[i].type;
						that.listdata[0].list[i].数量 = parseInt(that.listdata[0].list[i].数量)
						that.eachSelect(id, type, 0, i);
					}
					this.isShow = false
				})
			},
			// 删除购物车()
			cartDelete(id) {
				cartDelete({a: 'changeCart', cartId: id, type: 'del'}).then(response => {
					this.successToast = true
					this.getCartList()
				});
			},
			// 批量删除购物车
			cartDelete2() {
				var ids = ''
				for (const i in this.myarr) {
					ids += this.myarr[i].id + ','
				}
				ids = ids.substr(0, ids.length-1)
				cartDelete({a: 'changeCart', cartId: ids, type: 'del'}).then(response => {
					this.successToast = true
					this.getCartList()
				});
			}
		},
		watch: {
			goodnum: function(num) {
				if(num == this.total) {
					this.checkAllgood = true;
					this.payTotype = true;

				} else if(num == 0) {

					this.payTotype = false;
					this.checkAllgood = false;
				} else {

					this.payTotype = true;
					this.checkAllgood = false;
				}
			}
		}

	}
</script>

<style scoped="" lang="less">
	.weui-tabbar {
		color: #ccc!important;
	}
	
	.container .weui-tabbar a:nth-child(1) {
		flex: 0 1 auto;
		padding-right: 10px;
	}
	
	.container .weui-tabbar a:nth-child(2) {
		flex: 1 1 auto;
	}
	
	.container .weui-tabbar a:nth-child(3) {
		width: 25%;
		flex: 0 1 auto;
	}
	
	.container .weui-tabbar a:nth-child(1) span {
		color: #999;
	}
	
	.allPrice {
		display: block;
		text-align: right;
		padding-right: 10px;
		font-weight: 700;
		color: #DD2828;
		font-size: 16px;
	}
	
	.container {
		background-color: #f5f5f5;
		overflow: hidden;
	}
	
	.pagetitle {
		height: 40px;
		line-height: 40px;
		padding: 0 15px;
		color: #dd2828;
		text-align: left;
		box-shadow: 0 2px 1px #ccc;
		background-color: #fff;
	}
	
	.biglist {
		margin-bottom: 20px;
		box-shadow: 0 2px 2px #ccc;
		background-color: #fff;
	}
	
	.sublist {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: stretch;
		padding: 15px;
		.checked {
			width: 10%;
			flex: 0 1 auto;
			display: flex;
			span {
				align-self: center;
			}
		}
		.picture {
			width: 30%;
			flex: 0 1 auto;
			padding: 0 5px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.details {
			width: 60%;
			flex: 0 1 auto;
			display: flex;
			flex-flow: column nowrap;
			justify-content: space-between;
			p {
				font-size: 12px;;
				text-align: left;
				flex: 1 1 auto;
				overflow: hidden;
				// text-overflow: ellipsis;
				// white-space: nowrap;

			}
			.name {
				font-weight: bold;
			}
			.describe {
				font-size: 14px;
			}
			.info {
				color: #999;
				font-size: 12px;
				font-weight: bold;
			}
			.price_all {
				height: 20%;
				text-align: left;
				display: flex;
				justify-content: space-between;
				.price {
					color: #dd2828;
					font-weight: 700;
					line-height: 24px;
				}
				.num {
					color: #999;
					font-size: 16px;
					line-height: 24px;
					.weui-cell {
						padding: 0;
					}
				}
			}
		}
	}
	
	.category {
		height: 40px;
		line-height: 40px;
		padding: 0 15px;
		text-align: left;
		font-size: 1.2em;
	}
	
	.tips {
		height: 40px;
		line-height: 40px;
		padding-left: 70px;
		text-align: left;
		color: #DD2828;
	}
	
	.container .weui-tabbar {
		position: fixed;
		background: #FFF;
		font-size: 14px;
	}
	
	.container {
		padding-bottom: 50px;
		overflow: hidden;
	}
	
	.payto {
		background: #DD2828;
		display: block;
		color: #FFF;
		font-weight: 500;
	}
	
	.noto {
		background: #ccc;
		display: block;
		color: #FFF;
		font-weight: 500;
	}
	.weui-icon-circle, .weui-icon-success {
		font-size: 14px;
	}
</style>